<template>
  <div class="screen-container-main-right">
    <dv-border-box-10 class="sport">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          幼儿运动
        </div>
        <div class="sport-content" style="height: 90%;">
          <line-bar
            :width="'100%'"
            :height="'100%'"
            :seriesName="['步数', '运动量']"
            :barName="barName"
            :lineData="lineData"
            :barData="barData"
            :color="['#A9F387', '#73DDFF']"
            :dataZoomShow="false"
          ></line-bar>
        </div>
      </div>
    </dv-border-box-10>
    <dv-border-box-10 class="area">
      <div class="screen-container-main-content">
        <div class="screen-container-main-title">
          活动区域热度对比
        </div>
        <div class="area-tab">
          <ul class="df ai jc">
            <li
              v-for="(item, index) in tabList"
              :key="item"
              @click="tabClick(index)"
              :class="index == tabIndex ? 'area-tab-active' : ''"
            >
              {{ item }}
            </li>
          </ul>
        </div>
        <div class="area-content" style="height: 75%;">
          <dv-scroll-ranking-board
            v-if="tabIndex == 0"
            id="u100_div"
            :config="info"
            style="width:100%;height:100%"
          ></dv-scroll-ranking-board>
          <line-chart
            v-if="tabIndex == 1"
            :splitLineShow="false"
            :width="'100%'"
            :height="'100%'"
            :unit="'%'"
            :xData="inDoorXData"
            :data="inDoorYData"
            :color="['#ff874b', '#fe9a8b']"
          ></line-chart>
          <line-chart
            v-if="tabIndex == 2"
            :splitLineShow="false"
            :width="'100%'"
            :height="'100%'"
            :unit="'%'"
            :xData="outDoorXData"
            :data="outDoorYData"
            :color="['#A9F387', '#48D8BF']"
          ></line-chart>
        </div>
      </div>
    </dv-border-box-10>
  </div>
</template>
<script>
import lineBar from '@/components/Echarts/lineBar.vue'
import lineChart from '@/components/Echarts/line.vue'
import { getAction } from '@/api/manage.js'
export default {
  name: 'fight',
  data() {
    return {
      tabList: ['室内区域欢迎度', '户外区域欢迎度', '专业活动室欢迎度'],
      tabIndex: 0,
      barName: [],
      barData: [],
      lineData: [],
      inDoorXData: [],
      inDoorYData: [],
      outDoorXData: [],
      outDoorYData: [],
      info: {
        data: [],
        rowNum: 4,
        valueFormatter({ value }) {
          return value=='NaN'? "0%" : value + "%"
        }
      }
    }
  },
  components: {
    lineBar,
    lineChart
  },

  filters: {},

  computed: {},

  created() {
    this.getInDoor(0)
    this.getSports()
  },

  activated() {},

  mounted() {},

  methods: {
    tabClick(index) {
      this.tabIndex = index
      this.getInDoor(index)
    },
    getSports() {
      let url = 'health/skSportRecord/getSprotStatistical'
      const params = {
        areaType: 1,
        startDate: this.$skCommon.getDate(0),
        endDate: this.$skCommon.getDate(0),
        // startDate:"2023-03-17",
        // endDate:"2023-03-18",
        statisticalScope: 'class'
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            res.result.forEach(item => {
              this.barName.push(item.className)
              this.barData.push(item.totalStepNumber)
              this.lineData.push(item.totalAmount)
            })
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 获取室内欢迎度
    getInDoor(areaType) {
      this.info.data = []
      this.inDoorXData = []
      this.inDoorYData = []
      this.outDoorXData = []
      this.outDoorYData = []
      let url = '/management/skArea/getAreaDuration'
      const params = {
        areaType: areaType,
        timeScope: 'today'
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            let totalDuration = 0
            res.result.forEach(item => {
              totalDuration += item.duration
            })
            res.result.forEach(item => {
              if (areaType == 0) {
                this.info.data.push({
                  name: item.className + item.areaName,
                  value: ((item.duration / totalDuration) * 100).toFixed(2)
                })
              }
              if (areaType == 1) {
                this.inDoorXData.push(item.areaName)
                this.inDoorYData.push(((item.duration / totalDuration) * 100).toFixed(2))
              }
              if (areaType == 2) {
                this.outDoorXData.push(item.areaName)
                this.outDoorYData.push(((item.duration / totalDuration) * 100).toFixed(2))
              }
            })
            this.info = { ...this.info }
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
